<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>黑马旅游网-登录1</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--导入json转换js-->
    <script src="js/json.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<section id="login_wrap">
    <div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">
    </div>
    <div class="login-box">
        <div class="title">
            <img src="images/login_logo.png" alt="">
            <span>欢迎登录黑马旅游账户</span>
        </div>
        <div class="login_inner">
            <!--登录错误提示消息-->
            <div id="errorMsg" class="alert alert-danger" ></div>
            <form id="loginForm" method="post">
                <!-- TODO: 2.在表单中添加一个隐藏输入框,携带请求标识-->
                <input type="hidden" name="action" value="login" />
                <input name="username" type="text" placeholder="请输入账号" autocomplete="off">
                <input name="password" type="password" placeholder="请输入密码" autocomplete="off">
                <div class="verify">
                    <input name="ucode" type="text" placeholder="请输入验证码" autocomplete="off">
                    <span><img id="codeImg" src="checkCode" alt="" onclick="changeCheckCode(this)"></span>
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src="checkCode?"+new Date().getTime();
                        }
                    </script>
                </div>
                <div class="submit_btn">
                    <!-- TODO: 1.将表单的提交按钮改成普通按钮,并绑定单击事件 -->
                    <button type="button" id="loginBtn" onclick="login()">登录</button>
                    <div class="auto_login">
                        <input type="checkbox"  class="checkbox">
                        <span>自动登录</span>
                    </div>
                </div>
            </form>
            <div class="reg">没有账户？<a href="javascript:;">立即注册</a></div>
        </div>
    </div>
</section>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script>
    /*3.当点击"登录"按钮时,触发单击事件,在单击事件中发送ajax请求即可*/
    function login() {
        //alert("单击事件触发了");
        var url = "/userServlet";
        // 表单对象.serialize();
        // 可以序列表单中的数据,将数据序列成 key=value&key=value
        var params = $("#loginForm").serialize();
        //alert(params);
        $.get(url,params,function(resultdata){
            if(resultdata.flag){
                //登录成功后,跳转到首页
                //history.go(-1);
                location.href = "index.html";
            }else {
                //登录失败
                $("#errorMsg").html(resultdata.errorMsg);
                // 默认点击图片,切换验证码
                $("#codeImg").click();
            }
        },"json");
    }
</script>
</body>
</html>